<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>网络攻防演练控制台</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
  <link rel="shortcut icon" href="/static/images/favicon.ico">
  <!--[if lte IE 8]><meta http-equiv="refresh" content="0;url=/ie" /><![endif]-->
  
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/font-awesome.min.css">
  <link rel="stylesheet" href="/static/css/odometer-theme-default.css">
  <link rel="stylesheet" href="/static/css/main.css">
  <script src="/static/js/echarts.min.js"></script>
  <script src="/static/js/map/china.js"></script> 
  <script src="/static/js/jquery-3.2.1.min.js"></script>
  <script src="/static/js/bootstrap.min.js"></script>
  <script src="/static/js/odometer.min.js"></script>  
</head>

<body class="container-fluid">
  <div class="col-md-12">
      <div class="row">
        <div id="main" style="height:1080px;"></div>
      </div>
  </div>
  
  <div class="col-md-3 statistic-wrapper chart_column">
      <h4>被感染主机数量</h4>
      <dl>
          <dd id="beijingHostsNum" class="odometer odometer-auto-theme" data-num=""></dd>
          <dt>北京</dt>
      </dl>
      <dl>
          <dd id="tianjinHostsNum" class="odometer odometer-auto-theme" data-num=""></dd>
          <dt>天津</dt>
      </dl>
      <dl>
          <dd id="hebeiHostsNum" class="odometer odometer-auto-theme" data-num=""></dd>
          <dt>河北</dt>
      </dl>
      <dl>
          <dd id="shanxiHostsNum" class="odometer odometer-auto-theme" data-num=""></dd>
          <dt>山西</dt>
      </dl>
      <dl>
          <dd id="shandongHostsNum" class="odometer odometer-auto-theme" data-num=""></dd>
          <dt>山东</dt>
      </dl>
      <dl>
          <dd id="totalHostsNum" class="odometer odometer-auto-theme" data-num=""></dd>
          <dt>全国</dt>
      </dl>
  </div>
  
  <div class="col-md-3 text_column" >
      <div class="intro">
      <h2><span class="label label-primary">2</span> 网络病毒爆发</h2>
      <p>京津冀晋鲁五省的“木马和僵尸网络监测处置系统”陆续监测到，一款名为“XXX”的木马病毒在五省爆发并感染大量主机。  </p>
      </div>
      
      
      <div class="alarm">
      </div>
      
      <div class="defense">
      </div>
    </div>
  
  <div class="col-md-9 long_chart" id="totalNumFlow" style="height:200px;"></div>
  
  
<div id="alarmModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <h1 class="alarm"><i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true"></i>&nbsp;&nbsp;警报</h1>
        <h1>发现网络病毒爆发!!!</h1>
      </div>
    </div>
</div>
</body>

<script type="text/javascript">
var alarmModal = $('#alarmModal').on('shown.bs.modal', function () {
  clearTimeout(alarmModal.data('hideInteval'))
  var id = setTimeout(function(){
      alarmModal.modal('hide');
  }, 8000);
  alarmModal.data('hideInteval', id);
})
</script>

<script src="/echarts/virus.js"></script>
<script src="/echarts/virus_flow.js"></script> 
<script type="text/javascript">
$(function() {
  var virusChart = echarts.init(document.getElementById('main'));
  virusChart.setOption(spreadOption);
  
  var totalNumFlowChart = echarts.init(document.getElementById('totalNumFlow'));
  totalNumFlowChart.setOption(totalNumFlowOption);


  $(window).resize(function() {
    virusChart.resize();
    totalNumFlowChart.resize();
  });


  var animationOption = {
    geo: {
    }
  };
  
  var areaPinyin = {'北京': 'beijing', '天津': 'tianjin', '河北': 'hebei', '山西': 'shanxi', '山东': 'shandong', '全国': 'total'};

  // 兼容console中jquery。load，DOMContentLoaded没有触发。
  Odometer.init();

  var virusApi = "/api/virus.json";
  function getAndDisplayVirus() {
    $.getJSON(virusApi, function( result ) {
      if(result.alarm) {
        $('#alarmModal').modal('show');
      }
      
      virusChart.setOption({
        series : [
          {data: convertData(result.areaHostsNum)},
          {data: convertData(result.areaHostsNum.sort(function (a, b) {
              return b.value - a.value;
          }).slice(0, 6))},
        ]
      });     
      
      
      result.infectionHostsNum.forEach(function(areaNum) {
        if(areaPinyin[areaNum.name] == 'total') {
          totalNumData.shift();
          now = new Date(+now + 5000);
          totalNumData.push([now, areaNum.value]);
        }
      });
      totalNumFlowChart.setOption({
        series : [
          {data: totalNumData}
        ]
      });     
      
      result.infectionHostsNum.forEach(function(areaNum) {
          $("#" + areaPinyin[areaNum.name] + "HostsNum").text(areaNum.value);
        });
      });
  }

  getAndDisplayVirus();
  setInterval(getAndDisplayVirus, 6000);
});
</script>
</html>
